<template>
	<view class="content">
		<u-navbar
			title="订单详情" 
			:bg-color="`${mainColor}`"
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"/>
		<view class="content-page" v-if="detail.id">
			<view class="item flex-a" v-for="(item, index) in items" :key="index" v-if="!item.show || item.show(detail)">
				<view class="name">
					{{item.label}}：
				</view>
				<view :class="item.active ? 'active' : 'value'">
					<view class="flex-ct" v-if="detail[item.name] != null">
						<image :src="baseUrl(detail[item.icon])" v-if="item.icon" class="card_icon"></image>
						<view :class="item.className && item.className(detail)">{{item.money ? '￥' : ''}}{{item.dict ? item.dict[detail[item.name]]: detail[item.name]}}</view>
					</view>
					<view v-else>{{item.default}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { baseUrl, getOrderDetail } from '@/api';
import { systemInfo } from '@/utils/mixin';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				baseUrl,
				orderId: '',
				detail: {},
				items: [
					{label: '订单号', name: 'order_no'},
					{label: '卡券类型', name: 'card_category', active: true},
					{label: '卡券种类', name: 'card_name', icon: 'card_icon'},
					{label: '提交面值', name: 'submit_face', money: true},
					{label: '兑换价格', name: 'recycling_price', money: true},
					{label: '卡号', name: 'card_no', default: '无'},
					{label: '卡密', name: 'card_pw'},
					{label: '订单状态', name: 'status', className: (item) => {
						return {tag: true, success: item.status == 1, error: item.status == 2}
					}, dict: {
						0: '审核中', 1: '成功', 2: '失败'
					}},
					{label: '失败原因', name: 'reject_reason', className: (item) => {
						return {error: true}
					}, show: (item) => {
						return item.status == 2
					}},
					{label: '真实面值', name: 'actual_face', money: true, default: '未知', show: (item) => {
						return item.status == 1
					}},
					{label: '实际兑换价格', name: 'actual_pay', money: true, default: '未知', show: (item) => {
						return item.status == 1
					}},
					{label: '实际支付', name: 'actual_pay', money: true, default: '未支付', show: (item) => {
						return item.status == 1
					}},
					{label: '支付方式', name: 'pay_method', show: (item) => {
						return item.status == 1
					}},
					{label: '提交时间', name: 'create_datetime'},
					{label: '处理时间', name: 'handle_time', show: (item) => {
						return item.status != 0
					}}
				]
			}
		},
		onLoad({id}) {
			this.getSystemInfo();
			this.orderId = id;
		},
		onShow() {
			this.loadOrderDetail();
		},
		methods: {
			async loadOrderDetail() {
				if (!this.orderId) return;
				
				const res = await getOrderDetail(this.orderId);
				this.detail = res.data;
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page{
	padding: 0 20px 0;
	font-family: Times New Roman;
	box-sizing: border-box;
}

.item {
    width: 100%;
    min-height: 41px;
    font-size: 14px;
    border-bottom: 1px solid #f1f1f1;
	display: flex;
	align-items: center;
	
	.name {
	    width: 100px;
	    margin-right: 5px;
		text-align: right;
	}
	
	.value {
	    color: #666;
	}
	
	.active {
	    color: #5ac725;
	}
	
	.card_icon {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		margin-right: 4px;
	}
	
	.tag {
		color: #f1a319;
	}
	
	.success {
	    color: #3c9cff;
	}
	
	.error {
	    color: #f56c6c;
	}
}
</style>
